<template>
  <view class="container">
    <u-navbar height="50" title="购物车" title-size="36" title-color="#333"> </u-navbar>
    <view class="locationView">
      <view class="mer-box" v-for="(group, shopIndex) in goodsList" :key="shopIndex">
        <view class="mer-box-top">
          <view class="mer-box-top-title">
            <u-icon
              name="/static/selected.png"
              size="36rpx"
              v-if="group.isPreSelected"
              @click="onPreShopAll(group)"
            ></u-icon>
            <u-icon
              v-else
              name="/static/unselect.png"
              size="36rpx"
              @click="onPreShopAll(group)"
            ></u-icon>
            <view class="" style="margin-left: 20rpx" @click="onShop(group)">
              <view class="dis-flex flex-x-center" style="justify-content: flex-start">
                <text class="mer-name">{{ group.shop.name }}</text>
                <u-icon size="28rpx" name="/static/more.png" mode=""></u-icon>
              </view>
              <!-- <p>满200免运费&nbsp;|&nbsp;运费¥5起</p> -->
            </view>
          </view>
          <view
            class="clear-mer-cart dis-flex flex-x-center"
            @click="clearCart(group.shop, shopIndex)"
          >
            <u-icon size="30rpx" name="/static/sc.png" mode=""></u-icon>
            <text style="margin-left: 10rpx">清空购物车</text>
          </view>
        </view>
        <u-line></u-line>
        <view class="mer-box-content">
          <view class="itemView" v-for="(item, index) in group.items" :key="index">
            <view class="goodsView" :class="item.invalid ? 'cant-use' : ''">
              <view @click="onSelected(item)" class="selectedView">
                <u-icon name="/static/selected.png" size="40" v-if="item.selected"></u-icon>
                <u-icon name="/static/unselect.png" size="40" v-else></u-icon>
                <view class="cant-select" v-if="item.invalid"></view>
              </view>
              <view class="imageView">
                <u-image
                  @click="onMer(item)"
                  width="150"
                  height="150"
                  :src="
                    item.sku && item.sku.picUrl ? item.sku.picUrl : item.spu ? item.spu.picUrl : ''
                  "
                  mode="aspectFill"
                  border-radius="10"
                ></u-image>
              </view>
              <view class="goodsData">
                <view @click="onMer(item)" class="goodsTitle">
                  <text>{{ item.spu ? item.spu.name : '--' }}</text>
                </view>
                <view class="goodsSku" v-if="item.sku">
                  <text v-for="item2 in item.sku.properties" :key="item2.propertiesId"
                    >{{ item2.valueName }}
                  </text>
                </view>
                <view class="priceView flex-y-between">
                  <view class="goodsPrice">
                    <text>¥{{ item.sku ? item.sku.priceYuan : '--' }}</text>
                  </view>
                  <view class="numberBox">
                    <u-number-box
                      :disabled="item.invalid"
                      v-model="item.count"
                      :min="1"
                      :disabled-input="false"
                      @change="onCartCont(item)"
                      @minus="onCartCont(item)"
                      @plus="onCartCont(item)"
                    ></u-number-box>
                  </view>
                </view>
              </view>
              <view v-if="item.invalid" class="cant-check">
                <text> {{ item.invalidReason }}</text>
                <view class="flex-1"></view>
                <text class="del" @click="delCartItem(item)">删除 </text>
              </view>
            </view>
          </view>
        </view>
        <view class="count" v-if="checkedShopId == group.shopId">
          <u-gap height="20"></u-gap>
          <u-line></u-line>
          <view class="bottomView">
            <view class="totalNum">总计</view>
            <view class="totalView">
              <text>原价：¥{{ totalPrice }}</text>
              <text v-if="vipPrice && vipPrice > 0" style="color: #ff2323; margin-left: 10rpx"
                >会员价：¥{{ vipPrice }}
              </text>
            </view>
          </view>
          <u-line></u-line>
          <u-gap height="20"></u-gap>
          <view class="bt-group">
            <view class="Btn" @click="onShop(group)">继续选购</view>
            <view class="Btn paymentBtn" @click="onGoodsBuy()">立即结算({{ goodsTotal }}) </view>
          </view>
        </view>
      </view>
      <view
        class="emptyView"
        v-if="
          goodsList.length <= 0 &&
          goodsList.length <= 0 &&
          goodsList.length <= 0 &&
          goodsList.length <= 0
        "
      >
        <u-empty text="购物车暂无数据~" src="/static/empty.png" icon-size="350"></u-empty>
      </view>

      <u-gap height="120"></u-gap>
    </view>

    <view
      class="floor"
      style="
        font-size: 30rpx;
        padding: 8rpx 15rpx;
        position: fixed;
        bottom: 100rpx;
        z-index: 999;
        width: 100%;
        background-color: #fff;
        display: none;
      "
    >
      <view class="total-price">
        <view class="total-price-left"> 总价</view>
        <view class="total-price-right" style="font-size: 35rpx"> ¥{{ totalPrice }} </view>
      </view>
      <u-divider></u-divider>
      <view class="mer-box-floor">
        <view class="handle-btn" style="background-color: #0f76bc; color: #fff" @click="onGoodsBuy">
          立即结算
        </view>
        <view class="handle-btn"> 继续选购</view>
      </view>
    </view>
    <!-- <UFoooter ref="uTab"></UFoooter> -->
  </view>
</template>

<script>
//import UFoooter from "@/components/uTabbar.vue";

export default {
  components: {
    //UFoooter,
  },
  data() {
    return {
      checkedShopId: null,
      height: '',
      imgStyle: {
        width: '12rem'
      },
      detailsPopup: false,
      page: 1,
      isSameDaySelected: false,
      goodsList: [],
      carList: [],
      isNextDaySelected: false,
      nextDayList: [],
      isSnapSelected: false,
      snapList: [],
      isPreSelected: false,
      preList: [],
      goodsTotal: 0,
      goodsTotalPrice: 0, //总商品价格
      vipPrice: 0,
      totalPrice: '', //总支付价格
      user_coupon_id: '', //优惠劵id
      coupon_price: '', //优惠价格
      cart_type: 1, //结算类型，1，当日达，2，次日达，3，限时购，4，预售商品
      pickupInfo: '', //自提点信息
      pickupPopup: false,
      self_pickup_contact: '',
      self_pickup_phone: '',
      pickup_name: '',
      pickup_phone: ''
    }
  },
  onLoad() {
    this.city = uni.getStorageSync('address')?.name || ''
  },
  onShow() {
    this.refreshData()
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      this.queryList()
    },
    onCity() {
      uni.$on('selectAddress', (res) => {
        this.cityCode = res.code
        this.city = res.name
        Vue.prototype.$address = this.city
        this.queryList()
        uni.$off('selectAddress')
      })
      uni.navigateTo({
        url: '/other/select-city/select-city'
      })
    },
    queryList() {
      let self = this
      self.isSameDaySelected = false
      self.isNextDaySelected = false
      self.isSnapSelected = false
      self.isPreSelected = false
      self.$u.api
        .getCartList()
        .then((res) => {
          uni.stopPullDownRefresh()
          this.goodsList = res.data
          this.onTotalPrice()
          let totalNum = 0
          res.data.forEach((gorup) => {
            gorup.isPreSelected = false
            gorup.items.forEach((item) => {
              //totalNum += 1;
              totalNum += item.count
            })
          })
          if (this.$refs.uTab) {
            this.$refs.uTab.setCartTabBadge(totalNum)
          }
        })
        .catch(() => {
          self.sameDayList = []
          self.nextDayList = []
          self.snapList = []
          self.preList = []
          uni.stopPullDownRefresh()
        })
    },
    onPickupAddress() {
      this.$utils.route('/other/select-pickup-cabinet2/select-pickup-cabinet2')
      uni.$on('data', (res) => {
        this.pickupInfo = res
        uni.$off('data')
      })
    },
    updateCarList() {
      console.log('updateCarList')
    },
    onPickupUser() {
      this.pickupPopup = true
    },
    onUserConfirm() {
      if (this.$u.test.isEmpty(this.pickup_name)) {
        this.$u.toast('请输入联系人')
        return
      }
      if (this.$u.test.isEmpty(this.pickup_phone)) {
        this.$u.toast('请输入联系电话')
        return
      }
      this.self_pickup_contact = this.pickup_name
      this.self_pickup_phone = this.pickup_phone
      this.pickupPopup = false
    },
    // 当日达列表
    onSameDayAll() {
      this.isSameDaySelected = !this.isSameDaySelected
      this.sameDayList.forEach((item) => {
        if (this.isSameDaySelected) {
          item.selected = true
          this.cart_type = 1
        } else {
          item.selected = false
        }
      })
      this.onSameDayTotalPrice()
    },
    onCartCont(item) {
      const app = this
      app.$u.throttle(function () {
        app.$u.api.putCartCount({
          id: item.id,
          count: item.count
        })
        app.onTotalPrice()
        app.$forceUpdate()
      }, 100)
    },

    onSelected(item) {
      if (item.invalid) return
      item.selected = !item.selected
      this.checkedShopId = item.shopId
      this.goodsList.forEach((shop) => {
        if (shop.shopId == this.checkedShopId) {
          shop.isPreSelected = true
          shop.items.forEach((item) => {
            if (item.selected == false && !item.invalid) {
              shop.isPreSelected = false
            }
          })
        } else {
          shop.isPreSelected = false
          shop.items.forEach((item2) => {
            item2.selected = false
          })
        }
      })
      this.onTotalPrice()
      this.$forceUpdate()
    },
    delCartItem(item) {
      const app = this
      app.$u.get('/app-api/trade/cart/delete?ids=' + item.id).then((res) => {
        if (res.code === 0) {
          app.$u.toast('移除成功')
          app.queryList()
        } else {
          app.$u.toast(res.msg)
        }
      })
    },
    onDelSameDay() {
      let self = this
      let isSelected = false
      let delNum = 0
      this.sameDayList.forEach((item) => {
        if (item.selected) {
          isSelected = true
          delNum++
        }
      })
      if (!isSelected) {
        this.$u.toast('请选择商品')
        return
      }
      let delTotal = 0
      uni.dialog.confirm('温馨提示', '确定要删除商品吗？', () => {
        this.sameDayList.forEach((item) => {
          if (item.selected) {
            self.$u.api.setCartDelete(item.id).then((res) => {
              delTotal++
            })
          }
        })
      })
      setTimeout(function () {
        if (delTotal == delNum) {
          self.$u.toast('删除成功')
        }
        self.queryList()
      }, 500)
    },
    onSameDayMinus(res, item) {
      let self = this
      self.$u.api
        .setCartDecr(item.id)
        .then((res) => {
          self.onSameDayTotalPrice()
        })
        .catch((res) => {
          item.product_num++
          this.$forceUpdate()
        })
    },
    onSameDayPlus(res, item) {
      let self = this
      self.$u.api
        .setCartIncr(item.id)
        .then((res) => {
          self.onSameDayTotalPrice()
        })
        .catch((res) => {
          item.product_num--
          this.$forceUpdate()
        })
    },
    onSameDayTotalPrice() {
      let selected = true
      let totalPrice = 0
      let sameDayTotal = 0
      this.initList(1)
      this.sameDayList.forEach((item) => {
        if (!item.selected) {
          selected = false
        } else {
          sameDayTotal++
          if (item.product_sku_json_array) {
            totalPrice =
              totalPrice + Number(item.product_sku_json_array.price) * Number(item.product_num)
          }
        }
      })
      this.isSameDaySelected = selected
      this.goodsTotalPrice = totalPrice
      this.goodsTotal = sameDayTotal
      this.$forceUpdate()
    },
    //计算价格
    onTotalPrice() {
      let selected = true
      let totalPrice = 0
      let vipPrice = 0
      let goodsTotal = 0
      this.goodsList.forEach((shop) => {
        shop.items.forEach((item) => {
          if (!item.selected) {
            selected = false
          } else {
            goodsTotal++
            totalPrice = totalPrice + Number(item.sku.price) * Number(item.count)
            vipPrice = vipPrice + Number(item.sku.vipPrice) * Number(item.count)
          }
        })
      })
      this.isNextDaySelected = selected
      this.goodsTotal = goodsTotal
      this.totalPrice = (totalPrice * 0.01).toFixed(2)
      this.vipPrice = (vipPrice * 0.01).toFixed(2)
      this.$forceUpdate()
    },

    onPreShopAll(group) {
      let ids = []
      if (group.isPreSelected == true) {
        this.checkedShopId = null
      } else {
        this.checkedShopId = group.shopId
      }
      this.goodsList.forEach((shop) => {
        if (shop.shopId != this.checkedShopId) {
          shop.isPreSelected = false
          shop.items.forEach((item) => {
            item.selected = false
          })
        } else {
          shop.isPreSelected = true
          shop.items.forEach((item) => {
            if (!item.invalid) {
              item.selected = true
            }
          })
        }
      })
      this.onTotalPrice()
    },
    // 预售列表
    onPreAll() {
      this.isPreSelected = !this.isPreSelected
      let ids = []
      this.goodsList.forEach((item) => {
        if (this.isPreSelected) {
          item.selected = true
          this.cart_type = 4
        } else {
          item.selected = false
        }
        ids.push(item.id)
      })

      this.$u
        .put('/app-api/trade/cart/update-selected', {
          ids,
          selected: this.isPreSelected
        })
        .then((res) => {})
      this.onTotalPrice()
    },
    onDelPre() {
      let self = this
      let isSelected = false
      let delNum = 0
      this.preList.forEach((item) => {
        if (item.selected) {
          isSelected = true
          delNum++
        }
      })
      if (!isSelected) {
        this.$u.toast('请选择商品')
        return
      }
      let delTotal = 0
      uni.dialog.confirm('温馨提示', '确定要删除商品吗？', () => {
        this.preList.forEach((item) => {
          if (item.selected) {
            self.$u.api.setPreCartDelete(item.id).then((res) => {
              delTotal++
            })
          }
        })
      })
      setTimeout(function () {
        if (delTotal == delNum) {
          self.$u.toast('删除成功')
        }
        self.queryList()
      }, 500)
    },
    onPreSelected(item) {
      item.selected = !item.selected
      this.cart_type = 4
      this.onPreTotalPrice()
      this.$forceUpdate()
    },
    onPreMinus(res, item) {
      let self = this
      self.$u.api
        .setPreCartDecr(item.id)
        .then((res) => {
          self.onPreTotalPrice()
        })
        .catch((res) => {
          item.pre_product_num++
          this.$forceUpdate()
        })
    },
    onPrePlus(res, item) {
      let self = this
      self.$u.api
        .setPreCartIncr(item.id)
        .then((res) => {
          self.onPreTotalPrice()
        })
        .catch((res) => {
          item.pre_product_num--
          this.$forceUpdate()
        })
    },
    onPreTotalPrice() {
      let selected = true
      let totalPrice = 0
      let preTotal = 0
      this.initList(4)
      this.preList.forEach((item) => {
        if (!item.selected) {
          selected = false
        } else {
          preTotal++
          if (item.pre_product_sku_json_array) {
            totalPrice =
              totalPrice +
              Number(item.pre_product_sku_json_array.price) * Number(item.pre_product_num)
          }
        }
      })
      this.isPreSelected = selected
      this.goodsTotalPrice = totalPrice
      this.goodsTotal = preTotal
      this.$forceUpdate()
    },
    onGoodsBuy() {
      let self = this
      let items = []
      this.goodsList.map((group) => {
        if (group.shopId == this.checkedShopId) {
          group.items.forEach((item) => {
            if (item.selected == true) {
              items.push({
                // skuId:'',
                cartId: item.id
                // count: ,
              })
            }
          })
        }
      })
      this.$utils.route({
        url: '/goods/order-confirm/order-confirm',
        params: {
          items: JSON.stringify(items)
        }
      })
    },
    onMer(e) {
      // uni.navigateTo({
      // 	url: "/goods/goods-details/goods-details?goodsId=" + e.spu.id
      // })
    },
    onCartSettle(cartIds) {
      let self = this
      if (cartIds.length <= 0) {
        this.$u.toast('请选择商品')
        return
      }
      if (this.$u.test.isEmpty(this.pickupInfo)) {
        this.$u.toast('请选择自提点')
        return
      }
      if (this.$u.test.isEmpty(this.self_pickup_contact)) {
        this.$u.toast('请添加自提人信息')
        return
      }
      if (this.$u.test.isEmpty(this.self_pickup_phone)) {
        this.$u.toast('请添加自提人信息')
        return
      }
      self.$u.api
        .setCartSettle({
          cart_ids: cartIds,
          user_coupon_id: this.user_coupon_id,
          cart_type: this.cart_type,
          self_pickup_locker_id: this.pickupInfo.pickup_locker_id,
          self_pickup_locker_box_id: this.pickupInfo.pickup_locker_box_id,
          self_pickup_contact: this.self_pickup_contact,
          self_pickup_phone: this.self_pickup_phone
        })
        .then((res) => {
          self.$utils.route({
            url: '/goods/payment/payment',
            params: {
              order_id: res.data.id,
              money: res.data.pay_price,
              total_weight: res.data.total_weight,
              delivery_price: res.data.delivery_price
            }
          })
        })
    },
    initList(index) {
      if (index != 1) {
        this.sameDayList.forEach((item) => {
          item.selected = false
        })
        this.isSameDaySelected = false
      }
      if (index != 2) {
        this.nextDayList.forEach((item) => {
          item.selected = false
        })
        this.isNextDaySelected = false
      }
      if (index != 3) {
        this.snapList.forEach((item) => {
          item.selected = false
        })
        this.isSnapSelected = false
      }
      if (index != 4) {
        this.preList.forEach((item) => {
          item.selected = false
        })
        this.isPreSelected = false
      }
      this.$forceUpdate()
    },
    onDel() {
      let ids = []
      this.goodsList.forEach((item) => {
        if (item.selected) {
          ids.push(item.id)
        }
      })
      if (ids.length == 0) {
        return this.$u.toast('选中商品')
      }
      uni.dialog.confirm('温馨提示', '是否移除选中商品？', () => {
        this.$u.api
          .setCartDelete({
            ids: ids.join()
          })
          .then((res) => {
            this.queryList()
            this.$forceUpdate()
            //this.onTotalPrice()
          })
      })
    },
    clearCart(shop, shopIndex) {
      uni.dialog.confirm('温馨提示', '是否清除当前店铺商品？', () => {
        this.$u.get('/app-api/trade/cart/deleteByShopId', {
          shopId: shop.id
        })
        this.goodsList.splice(shopIndex, 1)
      })
    },
    onShop(e) {
      uni.navigateTo({
        url: '/other/merchant-center/merchant-center?id=' + e.shopId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
//@import url('cart.scss');

page {
  height: 100%;
  background: #f5f5f5;
}

.mer-box {
  padding: 20rpx;
  background-color: #fff;
  margin: 15rpx 0;

  .mer-box-top {
    position: relative;
    margin-bottom: 20rpx;

    .mer-box-top-title {
      display: flex;
      align-items: center;

      text {
        font-size: 30rpx;
        color: #333333;
      }

      p {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #999999;
      }
    }

    .clear-mer-cart {
      position: absolute;
      top: 3rpx;
      right: 2rpx;
      font-size: 26rpx;
      color: #666666;
    }
  }
}

.itemView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12rpx;
  margin: 0px 20rpx;
  margin-top: 20rpx;
}

.itemType {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #22b857;
  margin-left: 10rpx;
}

.itemType2 {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #ff9711;
  margin-left: 10rpx;
}

.itemType3 {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #fd2cac;
  margin-left: 10rpx;
}

.itemTime {
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  margin-left: 10rpx;
}

.errorTitle {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #666666;
}

.itemDetele {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.allHead {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemAddView {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 50rpx;
  margin-top: 8rpx;
}

.itemMoney {
  font-size: 22rpx;
  font-weight: 400;
  color: #ff4242;
  height: 34rpx;
  line-height: 34rpx;
  padding: 0px 10rpx;
  text-align: center;
  background: #feecec;
  border-radius: 5rpx;
  margin-right: 10rpx;
}

.itemTitle {
  flex: 1;
  font-size: 22rpx;
  font-weight: 400;
  color: #333333;
}

.itemTitle text {
  color: #ff4242;
}

.itemAdd {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemAdd text {
  font-size: 22rpx;
  font-weight: 400;
  color: #333333;
  margin-right: 5rpx;
}

.goodsView {
  display: flex;
  flex-direction: row;
  // margin-bottom: 20rpx;
  position: relative;
}

.cant-use {
  //filter: grayscale(100%);
}

.cant-check {
  position: absolute;
  background-color: rgba(102, 102, 102, 0.5);
  height: 110%;
  font-size: 46rpx;
  font-weight: 600;
  color: #fff;
  left: 30rpx;
  right: 0;
  top: -5%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 50rpx;

  .del {
    width: 150rpx;
    height: 60rpx;
    background: $uni-color-primary;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 60rpx;
    text-align: center;
  }
}

.goodsBg {
  width: 100%;
  height: 150rpx;
  background: #ffffff70;
  position: absolute;
  z-index: 100;
  top: 0px;
}

.selectedView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  margin-left: -40rpx;
  position: relative;
}

.cant-select {
  width: 40rpx;
  height: 40rpx;
  background-color: #efefef;
  position: absolute;
  border-radius: 50%;
}

.goodsData {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.goodsTitle {
  font-size: 26rpx;
  font-weight: 500;
  color: #333333;
}

.goodsSku {
  font-size: 24rpx;
  font-weight: 500;
  color: #999999;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.goodsPrice {
  flex: 1;
  font-size: 26rpx;
  font-weight: 400;
  color: #ff2323;
}

.goodsPrice text {
  font-size: 32rpx;
  font-weight: 400;
  color: #ff2323;
}

.numberBox {
  // border: 1px solid #f2f2f2;
}

.imageView {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150rpx;
  height: 150rpx;
  position: relative;
}

.total-price {
  overflow: auto;
  padding: 20rpx;

  .total-price-left {
    float: left;
  }

  .total-price-right {
    float: right;
  }
}

.mer-box-floor {
  color: #666666;
  font-size: 25rpx;
  overflow: auto;

  .handle-btn {
    float: right;
    display: inline-block;
    border: 2rpx solid #e6e6e6;
    padding: 14rpx 19rpx;
    border-radius: 30rpx;
    margin: 10rpx;
  }
}

.bottomView {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 20rpx 0;
}

.bt-group {
  display: flex;
  justify-content: flex-end;
}

.totalNum {
  flex: 1;
  font-size: 26rpx;
  font-weight: 400;
  color: #666666;
}

.totalView {
  font-weight: 600;
  font-size: 28rpx;
  color: #333333;
}

.totalPrice {
  font-size: 26rpx;
  font-weight: 400;
  color: #333333;
}

.totalPrice text {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff4242;
}

.totalPrice2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 22rpx;
  font-weight: 400;
  color: #666;
}

.totalPrice2 text {
  font-size: 22rpx;
  color: #ff4242;
}

.Btn {
  width: 180rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 35rpx;
  font-size: 28rpx;
  font-weight: 400;
  margin-left: 30rpx;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
}

.paymentBtn {
  background: #10a28f;
  color: #ffffff;
}

.popupView {
  display: flex;
  flex-direction: column;
  height: 600rpx;
  padding: 0px 30rpx;
  background: #ffffff;
}

.popupHead {
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;
  text-align: center;
  padding: 30rpx;
}

.popupInfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 0rpx;
}

.popupText {
  flex: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.popupMoney {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.popupMoney2 {
  font-size: 28rpx;
  font-weight: 400;
  color: #ff2323;
}

.emptyView {
  padding: 200rpx 0px;
}

.popupView2 {
  display: flex;
  flex-direction: column;
  width: 550rpx;
  background: #ffffff;
  border-radius: 35rpx;
}

.popupInput {
  height: 80rpx;
  border: 1px solid #dcdfe6;
  margin: 0px 20rpx;
  padding: 0px 20rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  font-size: 28rpx;
  color: #333333;
}

.popupBtn {
  height: 70rpx;
  line-height: 70rpx;
  margin: 0px 20rpx;
  text-align: center;
  background: #22b857;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
}

// ::v-deep .u-number-input {
// 	margin: 0px !important;
// 	border-left: 1px solid #F2F2F2;
// 	border-right: 1px solid #F2F2F2;
// }
.u-navbar {
  background-color: #fff;

  .u-navbar-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    align-items: center;
  }

  .u-navbar-content-title {
    font-weight: 400;
    font-size: 36rpx;
    color: #333333;
    position: absolute;
    left: 20rpx;
    right: 0;
    height: 60rpx;
    line-height: 60rpx;
  }

  .u-slot-content {
    position: absolute;
    left: 140rpx;

    .address {
      font-size: 30rpx;
      color: #666666;
      margin-right: 2rpx;
    }
  }
}
</style>
